<template>
  <div class="essay">
    <a-row class="main">
      <a-col :span="8">
        <div class="addEssay">
          <div class="content">
            <a-textarea
              placeholder="说点儿什么吧"
              v-model="content"
              :auto-size="{ minRows: 4, maxRows: 4 }"
            />
          </div>
          <div class="btn">
            <a-upload :file-list="fileList" :remove="handleRemove" :before-upload="beforeUpload">
              <div v-if="fileList.length < 1">
                <a-button class="addImg" icon="file-image">随笔图片</a-button>
              </div>
            </a-upload>
            <a-button class="release" @click="saveEssay">发表</a-button>
          </div>
          <div class="prewImg">
            <img :src="temporaryPath" />
          </div>
        </div>
      </a-col>
      <a-col :span="16">
        <div class="essayList">
          <div class="title">随心笔记</div>
          <div class="list-item" v-for="item in essayLists" :key="item.id">
            <div class="main">
              <div class="content">{{ item.content }}</div>
              <img :src="item.essay_url" alt class="essayImg" />
            </div>

            <div class="btn">
              <div class="date">{{ item.addTime }}</div>
              <a-button type="danger" size="small" class="del" @click="delEssay(item.id)">删除</a-button>
            </div>
          </div>
          <a-pagination
            v-model="current"
            :page-size-options="pageSizeOptions"
            :total="total"
            :page-size="pageSize"
            show-size-changer
            class="paging"
            @showSizeChange="onShowSizeChange"
            @change="onChange"
          >
            <template slot="buildOptionText" slot-scope="props">
              <span v-if="props.value !== '50'">{{ props.value }}条/页</span>
            </template>
          </a-pagination>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: [],
      temporaryPath: "",
      content: "",
      isUpImg: false,
      essay_url: "",
      articleId: 0,
      current: 1, // 当前页数
      total: 0, // 数据总数
      pageSizeOptions: ["3", "5", "10"],
      pageSize: 3,
      essayLists: [],
    };
  },
  created() {
    this.getEssayList();
  },
  methods: {
    handleRemove(file) {
      const index = this.fileList.indexOf(file);
      const newFileList = this.fileList.slice();
      newFileList.splice(index, 1);
      this.fileList = newFileList;
      this.temporaryPath = "";
    },
    beforeUpload(file) {
      this.isUpImg = true;
      this.fileList = [...this.fileList, file];
      var reader = new FileReader();
      reader.readAsDataURL(this.fileList[0]);
      reader.onload = (evt) => {
        this.temporaryPath = evt.target.result;
      };
      return false;
    },
    async saveEssay() {
      if (this.content == "") {
        this.$message.error("请添加随笔内容");
        return false;
      }
      let dataProps = {};
      dataProps.content = this.content;
      dataProps.addTime = parseInt(new Date().getTime() / 1000);
      if (this.isUpImg) {
        //上传图片
        const { fileList } = this;
        const formData = new FormData();
        fileList.forEach((file) => {
          formData.append("files[]", file);
        });
        let res = await this.$http({
          url: "/admin/saveEssayImg",
          method: "post",
          data: formData,
          headers: { "Content-Type": "multipart/form-data" },
        });
        this.imgUploadUrl = res.data.data["files[]"];
        dataProps.essay_url = this.imgUploadUrl;
      }
      if (this.articleId == 0) {
        let result = await this.$http({
          method: "POST",
          url: "/admin/addEssay",
          data: dataProps,
        });
        this.articleId = result.data.insertId;
        if (result.data.isSuccess) {
          this.$message.success("随笔发布成功");
          this.getEssayList();
        } else {
          this.$message.error("随笔发布失败");
        }
      } else {
        dataProps.id = this.articleId;
        let res = await this.$http({
          method: "POST",
          url: "/admin/updateEssay",
          data: dataProps,
        });
        if (res.data.isSuccess) {
          this.$message.success("随笔保存成功");
          this.getEssayList();
        } else {
          this.$message.error("随笔保存失败");
        }
      }
    },
    // 改变每页几条时触发
    onShowSizeChange(current, pageSize) {
      this.pageSize = pageSize;
      this.getEssayList();
    },
    // 页码改变的回调
    onChange(current, pageSize) {
      this.current = current;
      this.getEssayList();
    },
    async getEssayList() {
      let { data: res } = await this.$http.get("/admin/getEssayList", {
        params: {
          current: this.current,
          pageSize: this.pageSize,
        },
      });
      this.essayLists = res.data;
      this.total = res.total;
    },
    async delEssay(id) {
      let _self = this;
      this.$confirm({
        title: "确定要删除这个心情随笔吗?",
        content: (h) => (
          <div style="color:red;">如果你点击OK按钮，随笔将永久被删除</div>
        ),
        async onOk() {
          let res = await _self.$http.get("/admin/delEssay", {
            params: {
              id,
            },
          });
          _self.$message.success("随笔删除成功");
          _self.getEssayList();
        },
        onCancel() {
          _self.$message.success("页面没有任何变化");
        },
      });
    },
  },
};
</script>

<style lang="less">
.essay {
  .addEssay {
    padding: 1rem 0 1rem 1rem;
    .content {
    }
    .btn {
      margin-top: 5px;
      display: flex;
      justify-content: flex-end;
      .addImg {
        background: #3498db;
      }
      .release {
        background: #3498db;
        margin-left: 5px;
      }
      .addImg:hover,
      .release:hover {
        color: #fff;
      }
    }
    .prewImg {
      img {
        display: inline-block;
        width: 100%;
        margin-top: 0.4rem;
        border-radius: 0.5rem;
      }
    }
  }
  .essayList {
    padding: 0 1rem;
    width: 80%;
    margin: 0 auto;
    .title {
      text-align: center;
      background-image: -webkit-linear-gradient(
        left,
        blue,
        #66ffff 10%,
        #cc00ff 20%,
        #cc00cc 30%,
        #ccccff 40%,
        #00ffff 50%,
        #ccccff 60%,
        #cc00cc 70%,
        #cc00ff 80%,
        #66ffff 90%,
        blue 100%
      );
      -webkit-text-fill-color: transparent; /* 将字体设置成透明色 */
      -webkit-background-clip: text; /* 裁剪背景图，使文字作为裁剪区域向外裁剪 */
      -webkit-background-size: 200% 100%;
      -webkit-animation: masked-animation 4s linear infinite;
      font-size: 1.4rem;
      font-family: "黑体";
    }
    @keyframes masked-animation {
      0% {
        background-position: 0 0;
      }
      100% {
        background-position: -100% 0;
      }
    }
    .list-item {
      .main {
        display: flex;
        justify-content: space-between;
        .content {
          margin-top: 0.3rem;
          width: 100%;
          padding: 0.5rem 0.5rem 0;
          color: rgba(0, 0, 0, 0.45);
        }
        img {
          height: 5rem;
          margin-top: 0.3rem;
          border-radius: 0.3rem;
        }
      }
      .btn {
        margin-top: 0.4rem;
        border-bottom: 1px solid #e8e8e8;
        padding-bottom: 0.7rem;
        display: flex;
        .del {
          background: #ff7675;
        }
        .date {
          margin: 0 0.5rem;
          color: #bdc3c7;
        }
      }
    }
    .paging {
      margin-top: 0.5rem;
      text-align: center;
    }
  }
}
</style>